<template>
  <div class="dashboard-container" style="height: 100%">
    <vue-particles color="#212121" />
    <el-row class="tac" style="height: 99.8%; width: 100%; min-width: 1000px; display: flex;justify-content: center;">
      <el-col style="height: 100%; width: 200px">
        <el-divider />
        <el-menu
          class="el-menu-vertical-demo"
          style="height: 100%; width: 100%"
          default-active="1"
        >
          <el-menu-item ref="addFolderItem" index="1" @click="getSystem()">
            <i class="el-icon-message-solid" />
            <span style="font-size: 16;">系统通知</span>  <el-badge class="mark" :value="noReadnumber" :hidden="noReadnumber === 0" />
          </el-menu-item>
          <el-divider />
<!--          <el-divider />-->
<!--          <el-menu-item ref="addFolderItem" index="2" @click="getComment()">-->
<!--            <i class="el-icon-s-promotion" />-->
<!--            <span style="font-size: 16;">回复我的</span> <el-badge class="mark" :value="commentMessageCount" :hidden="commentMessageCount === 0" />-->
<!--          </el-menu-item>-->
<!--          <el-divider />-->
<!--          <el-menu-item ref="addFolderItem" index="3" @click="getLike()">-->
<!--            <i class="el-icon-s-opportunity" />-->
<!--            <span style="font-size: 16;">收到的赞</span> <el-badge class="mark" :value="likeMessageCount" :hidden="likeMessageCount === 0" />-->
<!--          </el-menu-item>-->

        </el-menu>
        <el-divider />
      </el-col>

      <el-card style="overflow-Y:auto; height: 100%; width: 1000px">
        <el-col v-if="show===0" style="height: 100%; overflow-y: auto;">
          <el-row>
            <el-card shadow="never" style="padding: 15px,15px,15px,15px; margin-top: 5px;" >
              <a style="color: rgb(10, 199, 224);"><i class="el-icon-message-solid" />&ensp;我的系统通知</a>
            </el-card>
          </el-row>
          <div class="block" style="margin-top: 15px;  overflow-y: auto; ">
            <el-timeline>
              <el-timeline-item v-for="message in list" :key="message.id" :timestamp="message.createTime" :color="message.hasRead === 0 ? 'red' : '#209CF0'" icon="el-icon-more" placement="top">
                <el-card shadow="hover" :class="{ 'custom-card': true, 'read': message.hasRead === 1 }" @click.native="detailMessage(message.id)">
                  <el-badge :value="message.hasRead === 0 ? '未读' : '已读'" class="item" :type="message.hasRead === 0 ? '' : 'primary'">
                    <h4>{{ message.title }}</h4>
                  </el-badge>
                  <p class="truncate-text">{{ message.content }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
            <el-pagination
              :total="total"
              :current-page="search.page"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="search.limit"
              layout="total, prev, pager, next"
              style="margin-bottom: 30px"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-card>
    </el-row>

    <el-dialog
      :visible.sync="dialogVisible"
      width="55%"
      top="50px"
    >
      <h1>{{ messageAnnouncement.msgAnnouncement.title }}</h1>
      <v-md-editor
        v-model="messageAnnouncement.msgAnnouncement.content"
        v-alterELDialogMarginTop="{marginTop:'5vh'}"
        toc-nav-position-right="true"
        :include-level="[1,2,3,4,5]"
        height="100%"
        mode="preview"
      />
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/resourse/announcement'
import read from '@/api/resourse/announcementRead'
import messageApi from '@/api/resourse/announcement'
export default {
  data() {
    return {
      show: 0,
      list: [],
      total: 0,
      search: {
        page: 1,
        limit: 10
      },
      dialogVisible: false,
      fullscreenLoading: false,
      messageAnnouncement: {
        msgAnnouncement: {
          title: '',
          content: ''
        }
      },
      readModel: {
        announcementId: 0
      },
      commentList: [],
      commentTotal: 0,
      likeList: [],
      likeTotal: 0,
      commentSearch: {
        page: 1,
        limit: 10
      },
      likeMessageSearch: {
        page: 1,
        limit: 10
      },
      likeMessageCount: 0,
      commentMessageCount: 0,
      noReadnumber: 0
    }
  },
  created() {
    this.getSystem()
    this.getByPage()
    this.handleSelect(1)
    this.getCommentMessageCount()
    this.getNoReadCount()
    this.openFullScreen()
  },
  methods: {
    getOtherUserInfo(id){
      this.$router.push({ path: '/getOtherUserInfo/' + id })
    },
    getNoReadCount() {
      messageApi.getNoReadCount().then(response => {
        this.noReadnumber = response.data
      })
    },
    getCommentMessageCount() {
      commentApi.getCommentsCount().then(response => {
        this.commentMessageCount = response.data
      })
    },
    getCommentMessage() {
      commentApi.getCommentsMessage(this.commentSearch).then(response => {
        this.commentList = response.data.rows
        this.commentTotal = response.data.total
        this.getCommentMessageCount()
        setTimeout(() => {
          this.fullscreenLoading = false
        }, 200)
      })
    },
    // 展示系统通知
    getSystem() {
      this.show = 0
    },
    // 展示评论通知
    getComment() {
      this.getCommentMessage()
      this.show = 1
    },
    openFullScreen() {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 800)
    },
    detailMessage(id) {
      api.getById(id).then(response => {
        this.messageAnnouncement = response.data
        this.dialogVisible = true
        this.getByPage()
      })
      this.addRead(id)
    },
    addRead(id) {
      this.readModel.announcementId = id
      read.add(this.readModel)
      this.getNoReadCount()
    },
    // 获取当前用户权限下消息内容
    // 分页查询公告
    getByPage() {
      api.getPage(this.search).then((response) => {
        this.list = response.data.records
        this.total = response.data.total
      })
    },
    // 用户点击左侧收藏夹
    handleSelect(key) {
    },
    // 修改当前页-系统通知
    handleCurrentChange(val) {
      this.search.page = val
      this.getByPage()
    },
    // 修改当前页-
    handleCurrentChangeComment(val) {
      this.commentSearch.page = val
      this.getCommentMessage()
    },
    handleCurrentChangeLike(val) {
      this.likeMessageSearch.page = val
      this.getLikeList()
    },
    clickPush(id) {
      this.$router.push({ path: '/questionDetail/' + id })
    }
  }
}
</script>

<style>
.tac .el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0px 0;
}
#particles-js{
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}
.custom-card:hover {
  cursor: pointer;
}
.truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to three lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* Adjust the maximum width as needed */
}
.dashboard-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  justify-content: center;
  position: absolute;
  background-size: cover;
  background-color: #99dee9;
}
</style>
